<template>
<div class="recommend">
    <scroll :data="songList" class="m-recom">
      <div>
        <slide v-if="sliderList.length">
          <div v-for="(item,index) in sliderList">
            <a :href="item.linkUrl">
              <img :src="item.picUrl" alt>
            </a>
          </div>
        </slide>
        <div>
          <h4 class="text">热门歌单推荐</h4>
          <section class="list-content">
            <load v-if="!songList.length"></load>
            <div class="song-list" v-for="item in songList" @click="goToSongList(item)"  :key="item.content_id">
              <div class="list-img">
                <img v-lazy="item.cover">
              </div>
              <div class="list-text">
                <p class="list-title">{{item.title}}</p>
                <p class="list-name">{{item.username}}</p>
              </div>
            </div>
          </section>
        </div>

      </div>
  </scroll>
  <router-view></router-view>
</div>
</template>

<script>
import scroll from '../base/scroll'
import Slide from '../base/slide'
import load from '../base/load'
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      sliderList: [],
      params: {
        data: {
          comm: { ct: 24 },
          category: {
            method: 'get_hot_category',
            param: { qq: '' },
            module: 'music.web_category_svr'
          },
          recomPlaylist: {
            method: 'get_hot_recommend',
            param: { async: 1, cmd: 2 },
            module: 'playlist.HotRecommendServer'
          },
          playlist: {
            method: 'get_playlist_by_category',
            param: { id: 8, curPage: 2, size: 40, order: 5, titleid: 8 },
            module: 'playlist.PlayListPlazaServer'
          },
          new_song: {
            module: 'QQMusic.MusichallServer',
            method: 'GetNewSong',
            param: { type: 0 }
          },
          new_album: {
            module: 'music.web_album_library',
            method: 'get_album_by_tags',
            param: {
              area: 1,
              company: -1,
              genre: -1,
              type: -1,
              year: -1,
              sort: 2,
              get_tags: 1,
              sin: 0,
              num: 40,
              click_albumid: 0
            }
          },
          toplist: {
            module: 'music.web_toplist_svr',
            method: 'get_toplist_index',
            param: {}
          },
          focus: {
            module: 'QQMusic.MusichallServer',
            method: 'GetFocus',
            param: {}
          }
        }
      },
      songList: []
    }
  },
  created() {
    this.getSwipes(), this.getSongList()
  },
  methods: {
    getSwipes() {
      this.axios
        .get('api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?')
        .then(res => {
          if (res.data.code == 0) {
            this.sliderList = res.data.data.slider
          }
        })
    },
    getSongList() {
      this.axios
        .get('list/cgi-bin/musicu.fcg?', { params: this.params })
        .then(res => {
          if (res.data.recomPlaylist.code == 0) {
            console.log(res)
            this.songList = res.data.recomPlaylist.data.v_hot
          }
        })
    },
    goToSongList(x) {
      this.$router.push(`/recommend/${x.content_id}`)
      this.setSinser(x)
    },
    ...mapMutations({
      setSinser: 'SET_SINGER'
    })
  },
  components: {
    Slide,
    load,
    scroll
  }
}
</script>

<style lang="scss">
// 通过向最外层容器设置 position: fixed; width: 100%; top: 70px;bottom: 0;使内部容器100%固定高度生效
.recommend{
  position: fixed;
   width: 100%;
  top: 78px;
  bottom: 0;
  background-color: #222;
}
.m-recom {
  height: 100%;
  overflow: hidden;
  .text {
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    height: 30px;
    background-color: #222;
    color: #ffcd32;
    margin: 0;
    font-weight: 300;
  }
  .list-content {
    .song-list {
      display: flex;
      height: 100px;
      justify-content: flex-start;
      background-color: #222;
      padding-bottom: 20px;
      .list-img {
        width: 100px;
        height: 100px;
        margin-left: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .list-text {
        padding-left: 20px;
        position: relative;
        .list-title {
          color: white;
          font-size: 14px;
          margin-top: 10px;

        }
        .list-name {
          color: rgba(255, 255, 255, 0.3);
          font-size: 13px;
          position: absolute;
          bottom: 10px;
        }
      }
    }
  }
}
</style>
